<template>
  <div class="home">
    <!-- 轮播图 -->
    <div class="center">
      <el-carousel indicator-position="">
        <el-carousel-item v-for="item in carousel" :key="item.carousel_id">
          <img :src="item.imgPath" alt="" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 轮播图END -->
    <div class="box">
      <div class="main">
        <!-- 手机 -->
        <div class="phone">
          <div class="box_header">
            <div class="title">手机</div>
          </div>
          <div class="box_main">
            <div class="main_left">
              <img
                src="http://101.132.181.9:3000/public/imgs/phone/phone.png"
                alt=""
              />
            </div>
            <div class="main_list" v-if="phoneList.length > 0">
              <!-- <homelist :list="phoneList" isMore="true"></homelist> -->
              <homelist
                v-for="item in phoneList"
                class="homelist"
                :key="item.product_id"
                :list="item"
              ></homelist>
              <li v-show="phoneList.length >= 1" class="moremain">
                <router-link to="/goods">
                  浏览更多
                  <i class="el-icon-d-arrow-right"></i>
                </router-link>
              </li>
            </div>
          </div>
        </div>

        <!-- 家电 -->
        <div class="accessory">
          <div class="box_header">
            <div class="title">家电</div>
            <div class="more" id="more">
              <mymenu :val="2" @fromChild="getChildMsg">
                <span slot="1">热门</span>
                <span slot="2">电视影音</span>
              </mymenu>
            </div>
          </div>
          <div class="box_main">
            <div class="main_left">
              <ul>
                <li>
                  <img
                    src="http://101.132.181.9:3000/public/imgs/appliance/appliance-promo1.png"
                    alt=""
                  />
                </li>
                <li>
                  <img
                    src="http://101.132.181.9:3000/public/imgs/appliance/appliance-promo2.png"
                    alt=""
                  />
                </li>
              </ul>
            </div>
            <div class="main_list" v-if="applianceList.length > 0">
              <!-- <homelist :list="phoneList" isMore="true"></homelist> -->
              <homelist
                v-for="item in applianceList"
                class="homelist"
                :key="item.product_id"
                :list="item"
              ></homelist>
              <li v-show="applianceList.length >= 1" class="moremain">
                <router-link to="/goods">
                  浏览更多
                  <i class="el-icon-d-arrow-right"></i>
                </router-link>
              </li>
            </div>
          </div>
        </div>

        <!-- 配件 -->
        <div class="appliance">
          <div class="box_header">
            <div class="title">配件</div>
            <div class="more" id="more">
              <mymenu :val="3" @fromChild="getChildMsg2">
                <span slot="1">热门</span>
                <span slot="2">保护套</span>
                <span slot="3">充电器</span>
              </mymenu>
            </div>
          </div>
          <div class="box_main">
            <div class="main_left">
              <ul>
                <li>
                  <img
                    src="http://101.132.181.9:3000/public/imgs/accessory/accessory-promo1.png"
                    alt=""
                  />
                </li>
                <li>
                  <img
                    src="http://101.132.181.9:3000/public/imgs/accessory/accessory-promo2.png"
                    alt=""
                  />
                </li>
              </ul>
            </div>
            <div class="main_list" v-if="accessoryList.length > 0">
              <!-- <homelist :list="phoneList" isMore="true"></homelist> -->
              <homelist
                v-for="item in accessoryList"
                class="homelist"
                :key="item.product_id"
                :list="item"
              ></homelist>
              <li v-show="accessoryList.length >= 1" class="moremain">
                <router-link to="/goods">
                  浏览更多
                  <i class="el-icon-d-arrow-right"></i>
                </router-link>
              </li>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import homelist from "@/components/mylist/index";
import mymenu from "@/components/mymenu/index.vue";
export default {
  components: {
    homelist: homelist,
    mymenu: mymenu,
  },
  data() {
    return {
      carousel: [], // 轮播图列表
      phoneList: [], // 手机列表
      applianceList: [], // 家电列表
      applianceHotList: [], // 热门家电
      TvList: [], // 电视
      applianceActive: 1, // 家电切换
      accessoryActive: 1, // 配件切换
      accessoryList: [], // 配件列表
      accessoryHotList: [], // 热门配件
      protectingShellList: [], // 保护套
      chargerList: [], // 充电器
    };
  },
  watch: {
    applianceActive: function (val) {
      // 页面初始化的时候把applianceHotList(热门家电商品列表)直接赋值给applianceList(家电商品列表)
      // 所以在切换商品列表时判断applianceHotList是否为空,为空则是第一次切换,把applianceList赋值给applianceHotList
      if (this.applianceHotList == "") {
        this.applianceHotList = this.applianceList;
      }
      if (val == 1) {
        // 1为热门商品
        this.applianceList = this.applianceHotList;
        return;
      }
      if (val == 2) {
        // 2为电视商品
        this.applianceList = this.TvList;
        return;
      }
    },
    accessoryActive: function (val) {
      // 页面初始化的时候把accessoryHotList(热门配件商品列表)直接赋值给accessoryList(配件商品列表)
      // 所以在切换商品列表时判断accessoryHotList是否为空,为空则是第一次切换,把accessoryList赋值给accessoryHotList
      if (this.accessoryActive == "") {
        this.accessoryHotList = this.accessoryList;
      }
      if (val == 1) {
        // 1为热门配件
        this.accessoryList = this.accessoryHotList;
        return;
      }
      if (val == 2) {
        // 2为保护套
        this.accessoryList = this.protectingShellList;
        return;
      }
      if (val == 3) {
        // 3为充电器
        this.accessoryList = this.chargerList;
        return;
      }
    },
  },
  methods: {
    // 轮播图
    async getCarousel() {
      const res = await this.$http.getCarousel();
      this.carousel = res.data;
    },
    // 手机
    async getPhoneList() {
      const res = await this.$http.getProduct();
      this.phoneList = res.data.filter((item) => {
        return item.product_id <= 7;
      });
      // console.log(this.phoneList);
    },
    // 热门家电
    async getApplianceHotList() {
      const res = await this.$http.getProduct();
      this.applianceHotList = res.data.filter((item) => {
        return item.hot_id == 2;
      });
      this.applianceList = this.applianceHotList;
      // console.log(this.applianceHotList);
    },
    // 电视
    async getTvList() {
      const res = await this.$http.getProduct();
      this.TvList = res.data.filter((item) => {
        return item.category_id == 2;
      });
      // console.log(this.TvList);
    },
    // 热门配件
    async getAccessoryHotList() {
      const res = await this.$http.getProduct();
      this.accessoryHotList = res.data.filter((item) => {
        return item.hot_id == 3;
      });
      this.accessoryList = this.accessoryHotList;
      // console.log(this.accessoryHotList);
    },
    // 保护套
    async getProtectingShellList() {
      const res = await this.$http.getProduct();
      this.protectingShellList = res.data.filter((item) => {
        return item.category_id == 5;
      });
      // console.log(this.protectingShellList);
    },
    // 充电器
    async getChargerList() {
      const res = await this.$http.getProduct();
      this.chargerList = res.data.filter((item) => {
        return item.category_id == 7;
      });
      // console.log(this.protectingShellList);
    },
    getChildMsg(val) {
      if (val) {
        this.applianceActive = val;
      }
      val = this.applianceActive;
    },
    getChildMsg2(val) {
      if (val) {
        this.accessoryActive = val;
      }
      val = this.accessoryActive;
    },
  },
  created() {
    this.getCarousel();
    this.getPhoneList();
    this.getApplianceHotList();
    this.getTvList();
    this.getAccessoryHotList();
    this.getProtectingShellList();
    this.getChargerList();
  },
};
</script>
<style lang="scss">
.home {
  .center {
    width: 1225px;
    margin: 0 auto;
    margin-bottom: 20px;
    .el-carousel-item {
      height: 460px;
    }
    img {
      width: 1225.5px;
      height: 460px;
    }
  }
  .el-carousel__container {
    height: 460px !important;
  }
  .box {
    background-color: #f5f5f5;
    padding-bottom: 20px;
    .main {
      margin: 0 auto;
      max-width: 1225px;
      .box_header {
        height: 58px;
        margin: 20px 0 0 0;
        .title {
          float: left;
          font-size: 22px;
          font-weight: 200;
          line-height: 58px;
          color: #333;
        }
        .more {
          float: right;
          a {
            font-size: 16px;
            line-height: 58px;
            // color: #424242;
          }
          a:hover {
            color: #ff6700;
          }
        }
      }
      .box_main {
        height: 615px;
        .main_left {
          float: left;
          height: 615px;
          width: 234px;
          img {
            width: 234px;
          }
          li {
            z-index: 1;
            width: 234px;
            height: 300px;
            margin-bottom: 14.5px;
            -webkit-transition: all 0.2s linear;
            transition: all 0.2s linear;
            img {
              width: 234px;
              height: 300px;
            }
          }
          li:hover {
            z-index: 2;
            -webkit-box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
            -webkit-transform: translate3d(0, -2px, 0);
            transform: translate3d(0, -2px, 0);
          }
        }
        .main_list {
          // float: left;
          display: flex;
          flex-wrap: wrap;
          height: 615px;
          width: 991px;
          .homelist {
            margin-left: 13px;
            margin-bottom: 35px;
          }
          .moremain {
            z-index: 1;
            float: left;
            width: 234px;
            height: 278px;
            padding: 10px 0;
            margin: 0 0 14.5px 13.7px;
            background-color: white;
            -webkit-transition: all 0.2s linear;
            transition: all 0.2s linear;
            position: relative;
            text-align: center;
            line-height: 278px;
            a {
              font-size: 18px;
              color: #333;
            }
            a:hover {
              color: #ff6700;
            }
          }
          .moremain:hover {
            z-index: 2;
            -webkit-box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
            -webkit-transform: translate3d(0, -2px, 0);
            transform: translate3d(0, -2px, 0);
          }
        }
      }
    }
  }
}
</style>
